 <!-- 主播管理 -->
<template>
  <div id="liveAnchorList">
    <div class="border_bottom">
      <span class="title_span">基础管理 / 主播管理</span>
    </div>
    <div >
      <el-form :inline="true" label-position="left">
        <div class="mT10 text-align-right">
          <el-form-item label="主播名称">
             <el-input v-model="form.anchorName" clearable placeholder="请输入主播名称" style="width:230px"></el-input>
          </el-form-item>
          <div style="float:right">
            <el-button type="primary" @click="btnPageList" icon="my-search" class="mL57">查询</el-button>
            <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
            <el-button @click="addAnchorDialog" icon="my-search" class="mL30">添加主播</el-button>
          </div>
        </div>
      </el-form>

      <el-dialog title="添加主播" :visible.sync="addDialogFormVisible" width="65%">
        <div ref="dialog">
          <el-form :model="addForm" :rules="rules" ref="addForm" :inline="true" label-width="140px" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form-item label="主播名称" prop="anchorName">
               <el-select v-model="addForm.anchorName" filterable clearable remote reserve-keyword placeholder="预订人"
                :remote-method="getFuzzyQueryAnchorUserListByName" @change="getFuzzyQueryAnchorUserByName"
                :loading="loading" style="width:218px">
                <el-option v-for="item in anchorUserList"
                    :key="item.userCode"
                    :label="item.userName"
                    :value="item.userCode">
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userCode }}</span>
                </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="主播简介" prop="anchorInfo">
              <el-input type="textarea" v-model="addForm.anchorInfo" auto-complete="off" style="width:218px"></el-input>
            </el-form-item>
             <el-form-item label="主播配图" ref= "ElUpload" required>
                  <el-upload ref="upload"
                      :action="uploadImg"
                      accept="image/*"
                      name="file"
                      list-type="picture-card"
                      :limit="1"
                      :on-exceed="onExceed"
                      :before-upload="beforeUpload"
                      :on-success="handleSuccess"
                      :on-remove="handleRemove"
                      :class="{disabled:uploadDisabled}">
                     <i class="el-icon-plus"></i>
                  </el-upload>
              </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btnCancel('addForm')">取 消</el-button>
          <el-button type="primary" @click="btnAdd('addForm')">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑主播" :visible.sync="editDialogFormVisible" width="65%">
        <div ref="dialog">
          <el-form :model="editForm" :rules="rules" ref="editForm" :inline="true" label-width="140px" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form-item label="主播名称" prop="anchorName">
              <el-select v-model="editForm.anchorName" filterable clearable remote reserve-keyword placeholder="预订人"
                :remote-method="getFuzzyQueryAnchorUserListByName" @change="getFuzzyQueryAnchorUserByName"
                :loading="loading" style="width:218px">
                <el-option v-for="item in anchorUserList"
                    :key="item.userCode"
                    :label="item.userName"
                    :value="item.userCode">
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userCode }}</span>
                </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="主播简介" prop="anchorInfo">
              <el-input type="textarea" v-model="editForm.anchorInfo" auto-complete="off" style="width:218px"></el-input>
            </el-form-item>
              <el-form-item label="主播配图" ref= "ElUpload" required>
                 <el-upload ref="upload"
                              :action="uploadImg"
                              accept="image/*"
                              name="file"
                              list-type="picture-card"
                              :before-upload="beforeUpload"
                              :on-success="handleSuccess"
                              :show-file-list="false">
                              <img v-if="anchorImg" :src="anchorImg" style="width:147px;height:98px;margin-top:10px">
                            <i v-else class="el-icon-plus"></i>
                  </el-upload>
              </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btnCancel('editForm')">取 消</el-button>
          <el-button type="primary" @click="btnEdit('editForm')">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="anchorName" label="主播名称"></el-table-column>
          <el-table-column prop="anchorCode" label="主播工号"></el-table-column>
          <el-table-column prop="anchorInfo" label="主播简介"></el-table-column>
          <el-table-column prop="updateUserName" label="更新人"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" :formatter="dateFormat"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="editAnchorDialog(scope.row)">编辑</el-button>
              <el-button type="text" @click="btnDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { liveBasicAPI, userInfoAPI } from "@/api/index";
export default {
  data() {
    return {
      loginUser: {
        uid: this.$root.uid,
        username: this.$root.username,
        email: this.$root.email
      },
      loadingTableData: false,
      loading: false,
      form: {
        anchorName: null,
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      addDialogFormVisible: false,
      addForm: {
        anchorName: "",
        anchorCode: "",
        anchorDepart: "",
        anchorInfo: "",
      },
      rules: {
        anchorName: [{ required: true, message: "主播不能为空" }]
      },
      tableData: [], //列表
      editDialogFormVisible: false,
      editForm: {
        anchorName: "",
        anchorCode: "",
        anchorDepart: "",
        anchorInfo: "",
      },
      anchorUserList: [],
      uploadImg:'/live/common/uploadAttachment',
      anchorImg:'',
    };
  },
  created: function() {
    //初始化主播列表数据
    this.btnPageList();
  },
  computed: {
    uploadDisabled:function() {
      return this.anchorImg.length >0;
    },
  },
  methods: {
    //每页显示条数更改
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.btnPageList();
    },
    //跳转、下一页等
    handleCurrentChange(pageIndex) {
      this.form.pageIndex = pageIndex;
      this.btnPageList();
    },
    //打开添加弹框
    addAnchorDialog() {
      this.addDialogFormVisible = true;
      setTimeout(() => {
        __punch.to(
          this.$refs.dialog,
          this.loginUser.username + this.loginUser.email,
          {}
        );
      }, 200);
      this.resetForm("addForm");
    },
    //取消按钮
    btnCancel(form) {
      if (form == "addForm") {
        this.addDialogFormVisible = false;
      } else {
        this.editDialogFormVisible = false;
      }
      this.resetForm(form);
    },
    //重置
    btnReset() {
      this.form.anchorName = "";
      this.form.pageIndex = 1;
      this.btnPageList();
    },
     //模糊查询主播人员信息
    getFuzzyQueryAnchorUserByName(userCode){
      let  obj={};
       obj = this.anchorUserList.find(item => {
        return item.userCode === userCode;
      });
      if(obj==undefined){
        this.addForm.anchorName = "";
        this.addForm.anchorCode = "";
        this.addForm.anchorDepart = "";
        return "";
      }
       this.addForm.anchorCode = obj.userCode;
       this.addForm.anchorName = obj.userName;
       this.addForm.anchorDepart = obj.departName;
    },
    //远程获取主播人员列表
    getFuzzyQueryAnchorUserListByName(query) {
        if (query !=null) {
        console.log(query);
        this.loading = true;
        setTimeout(()=>{
         this.loading=false;
         let param= { query: query };
         userInfoAPI.queryUserByInputParam( param, data => {
           this.anchorUserList = data;
            });
         },200);
      } else {
      this.anchorUserList=[];
      }
    },
    //查询
    btnPageList() {
      this.loadingTableData = true;
      //请求后台
      liveBasicAPI.getLiveAnchorPage(
        this.form,
        res => {
          if (res) {
            this.loadingTableData = false;
            //赋值
            this.tableData = res.records;
            this.form.total = res.total;
            this.form.pageIndex = res.page.pageIndex;
            this.form.pageSize = res.page.pageSize;
          }
        },
        () => {
          this.loadingTableData = false;
        }
      );
    },
    //添加
    btnAdd(addForm) {
      //校验表单
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          let param = {
            anchorName: this.addForm.anchorName,
            anchorCode: this.addForm.anchorCode,
            anchorDepart: this.addForm.anchorDepart,
            anchorInfo: this.addForm.anchorInfo,
            anchorImg: this.anchorImg,
          };
          //请求后台
          liveBasicAPI.addLiveAnchor(param, res => {
            if (res) {
              this.addDialogFormVisible = false;
              this.btnPageList();
              this.btnReset();
              this.resetForm("addForm");
              this.messageSuccess("添加成功！");
              this.$refs.upload.clearFiles();
            } else {
              this.messageError("添加失败！");
            }
          });
        } else {
          //校验失败
          return false;
        }
      });
    },
    //打开编辑弹框
    editAnchorDialog(row) {
      let param = {
        id: row.id
      };
      //请求后台
      liveBasicAPI.getLiveAnchorInfo(param, res => {
        if (res) {
          this.editForm = res;
          this.anchorImg = res.anchorImg;
          this.editDialogFormVisible = true;
        }
      });
      setTimeout(() => {
        __punch.to(
          this.$refs.dialog,
          this.loginUser.username + this.loginUser.email,
          {}
        );
      }, 200);
    },
    //编辑
    btnEdit(editForm) {
      //校验表单
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          let param = {
            id: this.editForm.id,
            anchorName: this.editForm.anchorName,
            anchorCode: this.editForm.anchorCode,
            anchorDepart: this.editForm.anchorDepart,
            anchorInfo: this.editForm.anchorInfo,
            anchorImg: this.anchorImg,
          };
          //请求后台
          liveBasicAPI.updateLiveAnchor(param, res => {
            if (res) {
              this.editDialogFormVisible = false;
              this.btnPageList();
              this.messageSuccess("修改成功！");
            } else {
              this.messageError("修改失败！");
            }
          });
        } else {
          //校验失败
          return false;
        }
      });
    },
    //删除
    btnDel(info) {
      this.$confirm("确认删除该主播?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (!info.id) {
            this.messageError("参数错误,Id不能为空");
          }
          let param = {
            id: info.id,
            isDeleted: 1
          };
          liveBasicAPI.updateLiveAnchor(
            param,
            res => {
              if (res) {
                this.btnReset();
                this.messageSuccess("删除成功");
              }
            },
            () => {
              this.messageError("操作失败");
            }
          );
        })
        .catch(() => {
          this.messageInfo("操作已取消");
        });
    },
    //文件上传成功的钩子函数
    handleSuccess(res, file) {
      if (file) {
        //将返回的文件储存路径赋值picture字段
        this.anchorImg = file.response.body.fileFurl; 
        this.$message({type: 'info',message: '图片上传成功',duration: 6000});
      }else{
        this.messageWarn(file.response.error);
      }
    },
    //删除文件之前的钩子函数
    handleRemove(file, fileList) {
      this.anchorImg = '';
      this.$message({type: 'info',message: '已删除原有图片',duration: 6000});
    },
    //点击列表中已上传的文件事的钩子函数
    handlePreview(file) {
    },
    //上传的文件个数超出设定时触发的函数
    onExceed(files, fileList) {
      this.$message({type: 'info',message: '最多只能上传一张图片',duration: 6000});
    },
    beforeUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
            this.messageWarn("上传图片大小不能超过5MB!");
            return false;
        }
        return true;
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    messageWarn(message) {
      this.$message({ showClose: true, type: "warning", message: message });
    },
    messageSuccess(message) {
      this.$message({ showClose: true, type: "success", message: message });
    },
    messageError(message) {
      this.$message({ showClose: true, type: "error", message: message });
    },
    messageInfo(message) {
      this.$message({ showClose: true, type: "info", message: message });
    },
    //日期转换
    dateFormat: function(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return formatDate(date);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mL57 {
  margin-left: 57px !important;
}
.el-tag {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0px;
}
.top {
  margin-top:20px;
  /* margin-left:20px; */
  padding:20px;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
}
.border_bottom {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(231, 228, 235);
}
.title_span{
  font-size:14px;
  color:#666
}
</style>
